<template>
    <div style="position: relative;display: flex;flex-direction: column;width: 340px;background: white;border-left: 1px solid #EAEDF3;border-right: 1px solid #EAEDF3;">
        <div id="search" style="padding:0 30px;line-height: 70px;border-bottom: 1px solid #EAEDF3;font-size: 18px;">
            事件详情
        </div>
        <div style="padding:30px;">
            <div>剩余时间：78 天</div>
            <a-progress :percent="25" :showInfo="false" />
            <div>剩余报名人数: 8 人</div>
            <a-progress :percent="50" :showInfo="false" />
        </div>
        <div style="padding:0 30px;line-height: 70px;border-bottom: 1px solid #EAEDF3;font-size: 18px;
        border-top: 1px solid #EAEDF3;">
            最近报名
        </div>
        <div style="padding: 30px;flex: 1;overflow-y: auto">
            <div v-for="(i,index) in 10" :key="index"
                 style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-bottom: 10px">
                <div style="display: flex;flex-direction: row;">
                    <span style="height: 38px;width: 38px;background: #34AA44;border-radius: 50%"></span>
                    <div style="margin-left: 10px;display: flex;flex-direction: column;justify-content: space-between">
                        <div style="font-size: 14px">Ruby Soto</div>
                        <div style="font-size: 12px;color: #9EA0A5;">1周前</div>
                    </div>
                </div>
                <div>...</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'EventInfoBar',
    };
</script>

<style scoped>

</style>
